<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import { getEmailCode, checkEmailCode } from '@/service/auth/index'
import { useToast } from 'wot-design-uni'
import { ref, onUnmounted } from 'vue'
const userStore = useUserStore()
const toast = useToast()

const emit = defineEmits(['sendNext'])
const email = ref(userStore.userInfo.email)
const timer = ref()
const countdown = ref(0)
const code = ref('1111')
const getCode = async () => {
  try {
    toast.loading('发送中')
    const codeFlag = await getEmailCode(email.value)
    toast.close()
    console.log(codeFlag)

    if (codeFlag.data) {
      toast.show('验证码已发送')
    } else {
      toast.show(codeFlag.message)
    }
  } catch (error) {
    toast.show('验证码发送失败')
  }

  countdown.value = 60
  timer.value = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--
    } else if (timer.value) {
      clearInterval(timer.value)
    }
  }, 1000)
}
const handlerNext = async () => {
  if (!/^\d{6}$/.test(code.value)) {
    return toast.error('请输入6位数字验证码')
  }
  toast.loading('验证中')

  try {
    const { code: resCode, data, message } = await checkEmailCode(email.value, code.value)
    toast.close()
    if (resCode === 200 && data) {
      emit('sendNext')
    } else {
      toast.show(message || '验证失败')
    }
  } catch (error) {
    toast.show('验证异常')
  }
}

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
})

const isActive = ref(false)
watch(
  () => code.value,
  (newval) => {
    if (newval.length === 6) {
      isActive.value = true
    } else {
      isActive.value = false
    }
  },
)
</script>

<template>
  <view class="email">
    <view class="email-box">
      <view class="item">
        <text class="item-lable">验证邮箱</text>
        <view class="email-address item-content">
          <view>{{ userStore.userInfo.email }}</view>
          <view
            class="get-code"
            :class="{ disabled: countdown > 0 }"
            @click="countdown === 0 && getCode()"
          >
            {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
          </view>
        </view>
      </view>
      <view class="item">
        <text class="item-lable">验证码</text>
        <view class="item-content">
          <input
            type="number"
            :maxlength="6"
            @input="(e) => (code = e.detail.value.slice(0, 6))"
            class="code-input"
            placeholder="请输入六位验证码"
            v-model="code"
          />
        </view>
      </view>
    </view>
    <wd-button
      :custom-class="isActive ? 'custom-shadow isDisabled' : 'custom-shadow'"
      block
      @click="handlerNext"
    >
      下一步
    </wd-button>
  </view>
</template>

<style lang="scss" scoped>
.email {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f5f5f5;

  .email-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 680rpx; // 限制最大宽度
    padding: 20rpx; // 为下一步按钮留空间
    margin-bottom: 15rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
      .item-lable {
        width: 120rpx;
        font-size: 24rpx;
        color: #333;
      }
      .item-content {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 540rpx;
        line-height: 1.5;
        &::before {
          position: absolute;
          bottom: -20rpx;
          left: 0;
          width: 100%;
          height: 1rpx;
          content: '';
          background-color: #f5f5f5;
          border-bottom: 1rpx solid #f5f5f5;
        }
      }
      // 去除最后一项的 ::before
      &:last-child .item-content::before {
        content: none; // 去掉最后一项的伪元素
      }
      .code-input {
        width: 100%;
        padding: 10rpx;
        font-size: 24rpx;
        border-radius: 10rpx;
      }
      .email-address {
        flex: 1;
        margin-left: 10rpx;
        font-size: 24rpx;
        color: #666;
      }

      .get-code {
        width: 110rpx !important;
        padding: 10rpx;
        font-size: 20rpx;
        color: white;
        text-align: center;
        background-color: $uni-bg-themes;
        border-radius: 10rpx;
        &.disabled {
          pointer-events: none;
          opacity: 0.6;
        }
      }
    }
  }

  :deep() {
    .custom-shadow {
      width: 680rpx;
      color: #fff;
      background-color: $uni-bg-themes;
      opacity: 0.6;
    }
    .isDisabled {
      background-color: $uni-bg-themes;
      opacity: 1;
    }
  }
}
</style>
